<script setup lang="ts">

import {inject, ref, computed, h, onMounted, provide} from "vue";

import {Ref} from "@vue/runtime-dom";

/*
const isCollapse = ref(false);

// 注入共享状态
const topLabels = inject<{ label: string; subItems: any[] }[]>('topLabels')!;
const selectedTopLabelIndex = inject<Ref<number>>('selectedTopLabelIndex')!;

// 当前选中的子菜单项索引
const selectedSubItemIndex = ref(0);

// 根据选中顶部标签计算要显示的子菜单项
const currentSubItems = computed(() => {
  return topLabels[selectedTopLabelIndex.value].subItems;
});

// 选择子菜单项的方法
const selectSubItem = (index: number) => {
  selectedSubItemIndex.value = index;
};
*/
defineProps<{
  subItems: any[];
  selectedSubItemIndex: number;
}>();

defineEmits<{
  (e: 'update:selected-sub-item-index', index: number): void;
}>();
</script>

<template>
  <div style="height: 95vh; width: 4vw">
    <!-- 左侧导航栏 -->
    <el-menu
        :default-active="String(selectedSubItemIndex)"
        background-color="#161f2c"
        text-color="#fff"
        active-text-color="#ffd04b"
        unique-opened
        :collapse="false"
    >
      <el-menu-item
          v-for="(item, index) in subItems"
          :key="index"
          :index="String(index)"
          @click="$emit('update:selected-sub-item-index', index)"
      >
        <span class="menu-item-text">{{ item.label }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
div{
  height: 95vh;
    background: #161f2c;
}
.menu-item-text {
  margin-top: 5vh;
  font-size: 0.6vw;
  height: 8vh;
  white-space: normal; /* 允许文本换行 */
  word-break: break-all; /* 在长单词或 URL 内部换行 */
  display: block; /* 确保 span 占据整个 el-menu-item 的宽度 */
  line-height: 1.2; /* 减小行间距 */
}
:deep .el-menu-item {
  width: 4vw;
  text-align: center;
  font-size: 1.5vh;
  height: 8vh;
}
.sidebar {
  width: 4vw;
  background-color: #161f2c;
  transition: width 0.3s;
}
</style>
